<template>
  <span>
  	<el-popover
  		v-model="show"
		  placement="right"
		  width="500"
		  trigger="click">
		  <div class="top">
			  <h3>请选择小程序</h3>
				<div class="close">
				  <el-button @click="show=false" icon="el-icon-close" circle></el-button>
				</div>
		  </div>
			<el-table
			   v-loading="!pload"
			    ref="multipleTable"
			    border
			    :data="tableData"
			    max-height="400"
			    size="mini"
			   >
	        <el-table-column
	          label="序号"
	          align="center"
	          show-overflow-tooltip
	          width="55"
	          >
	          <template slot-scope="scope">
							{{scope.$index * currentPage + 1}}
	          </template>
	        </el-table-column>
			    <el-table-column
			      label="小程序名称"
			      show-overflow-tooltip
			      >
			      <template slot-scope="scope">
								<el-tag type="danger" size="mini" v-if="value.appletId === scope.row.appletId">当前</el-tag>
								{{scope.row.appletName}}
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="选择"
			      align="center"
			      width="100"
			      show-overflow-tooltip
			      >
			      <template slot-scope="scope">
							<el-button @click="handleSelect(scope.row)" size="mini" :disabled="value.appletId === scope.row.appletId">选择</el-button>
			      </template>
			    </el-table-column>
			</el-table>
			<div class="page">
			  <el-pagination
			    @size-change="handleSizeChange"
			    @current-change="handleCurrentChange"
			    :current-page="currentPage"
			  :page-size="limit"
			  :page-sizes="limits"
			  background
			  layout="prev, next, total"
			  :total="count">
			  </el-pagination>
			</div>
			<el-button slot="reference">
				<span class="els" style="max-width:8em;">{{value.appletName}}</span>
				<i class="el-icon-arrow-down"></i>
				<i class="el-icon-circle-close" @click.stop="clear" v-if="select && value.appletId > 0"></i>
			</el-button>
		</el-popover>
  </span>
</template>
<script>
    import {artSelectApplet} from '@/utils/weApi'
    export default {
		  props: {
		    value: Object,
		    select: false//下拉框模式
		  },
      data(){
          return {
          	show: false,
            tableData: [],
            selection: [],
            selectTable: {},
            pload: false,
            pload2: false,
            currentPage:1,
            limit: 20,
            limits: [10,20,50,100],
            count:0,
            pages:1
          }
      },
      components: {
      },
      created(){
         this.getData()
      },
      methods: {
        handleSelect (row) {
        	this.show = false
        	this.$emit('input', row)
        },
        clear () {
        	this.$emit('input', {
        		appletId: -1,
        		appletName: ''
        	})
        },
        async getData(){
          this.pload = false
          const Datas = await artSelectApplet({
            pageNum: this.currentPage,
            pageSize: this.limit
          })
          this.tableData = Datas.data
          this.count = Datas.pageInfo.total
          this.pages = Datas.pageInfo.pages
          if (this.select) {
          	this.clear()
          } else {
	          if (this.tableData.length) {
	          	this.$emit('input', this.tableData[0])
	          } else {
	          	this.$alert(`当前没有小程序`,{type:'warning'})
	          }
          }
          this.pload = true
        },
        handleFilter () {
          this.getData()
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`)
          this.limit = val
          this.getData()
        },
        handleCurrentChange(val) {
          this.currentPage = val
          this.getData()
        }
      }
    }
</script>
<style scoped>
	.page {
		text-align: center;
		padding-top: 10px;
	}
	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>